<template>
    <div class="wrapper" :class="cname">
        <swiper :options="options" ref="tabIslider">
            <swiper-slide v-for="item in items" :key="item.id">
                <slot :data="item"></slot>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
export default {
  name: "tabIsliderComponent",
  props: {
      cname: {
          type: String,
          default: ""
      },
      options: {
          type: Object,
          default () {
              return {
                  observeParents:true,
                  observer:true                 
              }
          }
      },
      items: {
          type: Array,
          default ( ) {
              return []
          }
      }
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted() {
    this.$nextTick(() => {
        const tabIslider = this.$refs.tabIslider.swiper
        tabIslider.on('slideChange', () => { // 监控滑动后当前页面的索引，将索引发射到导航组件
            // 左右滑动时将当前slide的索引发送到nav组件
            this.$root.eventHub.$emit('slideTab', tabIslider.activeIndex);
        });
        // 接收nav组件传过来的导航按钮索引值，跳转到相应内容区
        this.$root.eventHub.$on('changeTab', (index) => { // 点击导航键跳转相应内容区
            tabIslider.slideTo(index, 500, false);
        });
    })
  } 
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-container
  width 100%
  height  auto
  overflow hidden
.wrapper
  width 100%
  height auto
  overflow hidden
</style>
